<template>
  <div class="fixed mt-0 ml-0 w-full h-full">
    <el-container class="h-full">
      <el-aside :width="isCollapse ? '60px' : '210px'">
        <!--侧栏导航组件-->
        <nav-menu :collapse="isCollapse" />
      </el-aside>
      <el-container>
        <el-header class="bg-white">
          <div class="flex items-center bg-white h-40px leading-40px">
            <nav-header @changeFoldStatus="handleFoldChange" />
          </div>
        </el-header>
        <el-main class="bg-gray-500 text-center">
          <div class="bg-white">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import NavMenu from '@/components/nav-menu'
import NavHeader from '@/components/nav-header'
import { ref } from 'vue'

const isCollapse = ref(false)
const handleFoldChange = (isFold: boolean) => {
  //isFold为true时，表示是折叠的，此时图标应为Expend,默认为false,即为不折叠
  isCollapse.value = isFold
}
</script>

<style scoped lang="less">
.el-header {
  //padding-left: 10px;
  height: 40px;
}

.el-aside {
  background-color: #0c2135;
}
</style>
